<template>
  <div class="nav-user-show">
    <div class="nav-user-left">
      <div class="nav-user-item" v-for="(item, i) in navTitles" :key="i">
        <router-link class="nav-user-link" :to="item.to">
          <div :class="['nav-user-title', 'nav-user-title'+i]"></div>
        </router-link>
      </div>
    </div>
    <div class="nav-user-right">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      navTitles:[
        {to:'/index/user/userInfo',title:'个人中心'},
        {to:'/index/user/favorites',title:'我的书架'},
        {to:'/index/user/comment',title:'我的书评'},
        {to:'/index/user/feedback',title:'我的反馈'},
        {to:'/index/user/setup',title:'账号设置'},
        {to:'/index/user/blacklist',title:'我的黑名单'},
      ]
    }
  }
}
</script>

<style lang='scss' scoped>
.nav-user-show {
  margin: 10px auto;
  background-color: #fff;
  border-radius: 5px;
  width: 97%;
  min-height: 500px;
  .nav-user-left {
    // width: 200px;
    display: flex;
    vertical-align: top;
    border: 1px solid #efefef;
    border-width: 0 1px 0 0;
    // padding: 10px 20px 10px 0;
    .nav-user-item {
      flex:1;
      // line-height: 42px;
      margin: 0;
      .nav-user-link{
        display: inline-block;
        height: 100%;
        width: 100%;
        color: #666;
        .nav-user-title {
          // display: inline-block;
          height: 37px;
          width: 33px;
          // padding-left: 35px;
          // margin-left: 15px;
          background: url('../../../assets/images/icon_user.png') no-repeat;
          position: relative;
          left: 50%;
          transform: translateX(-50%);
        }
        .nav-user-title0{
          background-position: 5px -188px;
        }
        .nav-user-title1{
          background-position: 5px -314px;
        }
        .nav-user-title2{
          background-position: 5px -397px;
        }
        .nav-user-title3{
          background-position: 5px -440px;
        }
        .nav-user-title4{
          background-position: 5px -481px;
        }
        .nav-user-title5{
          background-position: 5px -272px;
        }
      }
      .nav-user-link:hover{
        color: $base-color;
      }
    }
    
    .router-link-active{
      border: 1px solid $base-color;
      border-width: 0 0 2px 0;
      background-color: #FAFAFA;
      .nav-user-title{
        color: #000;
      }
    }
  }

  // .nav-user-right {
  // }

}
</style>